<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer CMS - 后台管理系统</title> 
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/resource/js/editor.md-master/css/editormd.css" rel="stylesheet" type="text/css" />
    <link href="/resource/js/plugins/tagit/jquery.tagit.css" rel="stylesheet" type="text/css" />
    <link href="/resource/js/plugins/tagit/tagit.ui-zendesk.css" rel="stylesheet" type="text/css" />
    <link href="/resource/js/webuploader-0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
    <link href="/resource/js/webuploader-0.1.5/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/resource/js/my97datepicker/skin/WdatePicker.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    	.btns{display:flex;}
    	.btns>#ctlBtn{height:32px;margin-left:10px;}
    	.file-item{display:flex;align-items: center;height: 30px;font-size:12px;justify-content: space-between;}
    	.file-item .file-name,.file-item .file-state{margin:0;padding:0;}
    	.file-item .file-name{font-size:12px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; width: 380px;}
    	.file-item .state{margin-left:50px;}
    	.file-item .close{cursor: pointer;}
    </style>
</head>

<body>
<div class="row">
    <div class="col-md-12">
    	<h1 class="panel-heading">编辑文章</h1>
        <!--breadcrumbs start -->
        <ul class="breadcrumb">
			<li><a href="/admin/dashboard/toIndex"><i class="fa fa-home"></i> 首页</a></li>
			<li th:if="${article.categoryCnName != null}"><a href="/admin/category" th:title="${article.categoryCnName}" th:text="${article.categoryCnName}"></a></li>
			<li class="active">编辑文章</li>
		</ul>
        <!--breadcrumbs end -->
    </div>
</div>
<section class="panel">
	<div class="panel-body">
		<form class="col s12" id="form1" enctype="multipart/form-data" th:object="${article}" th:action="@{/admin/archives/edit}" onsubmit="return validateForm();" method="post">
			<input name="id" id="id" type="hidden" th:value="*{aid}" />
			<input name="fid" id="fid" type="hidden" th:value="*{id}" />
			<input name="categoryId" type="hidden" th:value="*{categoryId}"/>
			<input name="categoryIds" type="hidden" th:value="*{categoryIds}"/>
			<input name="imagePath" id="filepath" type="hidden" th:value="*{imagePath}" />
			<input th:name="${field.fieldName}" th:id="'input-' + ${field.id}" type="hidden" th:each="field : ${fields}" th:if="${field.dataType} == 'html' or ${field.dataType} == 'markdown'" />
			<input th:name="${field.fieldName}" th:id="'input-' + ${field.id}" th:value="${article[field.fieldName]}" type="hidden" th:each="field : ${fields}" th:if="${field.dataType} == 'file'" />
			<input th:name="${field.fieldName}" th:id="'input-' + ${field.id}" th:value="${article[field.fieldName]}" type="hidden" th:each="field : ${fields}" th:if="${field.dataType} == 'image'" />
			<input th:name="${field.fieldName}" th:id="'input-' + ${field.id}" th:value="${article[field.fieldName]}" type="hidden" th:each="field : ${fields}" th:if="${field.dataType} == 'imageset'" />
			<div class="form-group form-control-medium">
				<label for="title">文章标题：</label>
				<input id="title" name="title" type="text" class="form-control" th:value="*{title}" placeholder="文章标题" />
			</div>
			<div class="form-group form-control-small">
                <label for="weight">权重：</label>
                <input id="weight" name="weight" type="text" class="form-control" th:value="*{weight}" placeholder="权重" />
			</div>
			<div class="form-group form-control-small">
                <label for="clicks">点击：</label>
                <input id="clicks" name="clicks" type="text" class="form-control" th:value="*{clicks}" placeholder="点击数" />
			</div>
			<div class="form-group form-control-medium">
				<label for="properties">自定义属性：</label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="properties" id="h" value="h" th:checked="${#strings.contains(article.properties,'h')}" /> 头条[h]
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="properties" id="b" value="b" th:checked="${#strings.contains(article.properties,'b')}" /> 加粗[b]
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="properties" id="f" value="f" th:checked="${#strings.contains(article.properties,'f')}" /> 幻灯[f]
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="properties" id="p" value="p" th:checked="${#strings.contains(article.properties,'p')}" /> 图片[p]
                </label>
			</div>
			<div class="form-group form-control-medium">
				<label for="imagePath">缩略图：</label>
				<div id="uploader" class="wu-example">
				    <!--用来存放文件信息-->
				    <div id="file-priview" class="file-priview">
				    	<img th:src="${system.website} + 'resources/' + ${system.uploaddir} + '/' + *{imagePath}" th:if="*{imagePath} != null and *{imagePath} != ''" />
				    </div>
				    <div class="btns">
				        <div id="picker">选择文件...</div>
				    </div>
				</div>
			</div>
			<div class="form-group form-control-medium">
				<label for="categoryId">所属栏目：</label>
				<input id="categoryId" type="text" class="form-control" th:value="*{categoryCnName}" readonly="readonly">
			</div>
			<div class="form-group form-control-medium">
				<label for="tag">标签：</label>
				<ul id="myULTags">
					<li th:each="item : ${#strings.arraySplit(article.tag,',')}" th:text="${item}"></li>
				</ul>
			</div>
			<div class="form-group">
				<label for="description">内容摘要：</label>
				<textarea id="description" name="description" class="form-control" th:text="*{description}" placeholder="内容摘要"></textarea>
			</div>
			<div th:each="field : ${fields}" 
				 th:class="${field.dataType} == 'varchar' or ${field.dataType} == 'char' or ${field.dataType} == 'file' or ${field.dataType} == 'select' or ${field.dataType} == 'datetime' or ${field.dataType} == 'imageset' ? 'form-group form-control-medium' : 'form-group'">
				<!-- 提示文字 -->
				<label th:attr="for=${field.id}" th:text="${field.fieldText}+'：'"></label>
				<!-- 单行文本框（CHAR和VARCHAR） -->
				<input th:id="${field.id}" th:name="${field.fieldName}" th:value="${article[field.fieldName]}" type="text" class="form-control" th:if="${field.dataType} == 'varchar' or ${field.dataType} == 'char'">
				<!-- 多行文本框（TEXTAREA） -->
				<textarea th:id="${field.id}" th:name="${field.fieldName}" th:text="${article[field.fieldName]}" class="form-control" th:if="${field.dataType} == 'textarea'"></textarea>
				<!-- MARKDOWN -->
				<div class="mdeditor" th:id="'md-editormd-'+${field.id}" th:if="${field.dataType} == 'markdown'"></div>
				<!-- UEDITOR -->
				<script th:id="'ue-editor-'+${field.id}" type="text/plain" style="width:100%;height:320px;" th:if="${field.dataType} == 'html'"></script>
				<input type="hidden" th:id="'ue-editor-value-' + ${field.id}" th:attr="fieldid=${field.id}" th:value="${article[field.fieldName]}" th:if="${field.dataType} == 'html'" />
				<!-- 文件上传（FILE） -->
				<div th:id="'uploader-'+${field.id}" class="wu-example" th:if="${field.dataType} == 'file'">
				    <!--用来存放文件信息-->
				    <div th:id="'file-priview-'+${field.id}" class="file-priview">
				    	<div th:text="${system.uploaddir} + '/' + ${article[field.fieldName]}" th:if="${article[field.fieldName]} != null and ${article[field.fieldName]} != ''"></div>
				    </div>
				    <div class="btns">
				        <div th:id="'picker-'+${field.id}">选择文件...</div>
				    </div>
				</div>
	            <!-- 单选（RADIO） -->
                <div class="row" th:if="${field.dataType} == 'radio'">
                    <div class="checkbox-item" th:each="radio : ${#strings.arraySplit(field.defaultValue,',')}">
                        <label class="checkbox-inline">
                            <input type="radio" th:name="${field.fieldName}" th:id="${field.id}+'-'+${radio}" th:value="${radio}" th:text="${radio}" th:checked="${radio} == ${article[field.fieldName]}" />
                        </label>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <!-- 多选（CHECKBOX） -->
                <div class="row" th:if="${field.dataType} == 'checkbox'">
                    <div class="checkbox-item" th:each="checkbox : ${#strings.arraySplit(field.defaultValue,',')}">
                        <label class="checkbox-inline">
                            <input type="checkbox" th:name="${field.fieldName}" th:id="${field.id}+'-'+${checkbox}" th:value="${checkbox}" th:text="${checkbox}" th:checked="${#strings.contains(article[field.fieldName],checkbox)}" />
                        </label>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <!-- 下拉框（SELECTED） -->
                <select class="form-control m-b-10" th:name="${field.fieldName}" th:if="${field.dataType} == 'select'">
                	<option th:each="item : ${#strings.arraySplit(field.defaultValue,',')}" th:text="${item}" th:selected="${radio} == ${article[field.fieldName]}"></option>
                </select>
                <!-- 时间（DATETIME） -->
                <input th:id="${field.id}" th:name="${field.fieldName}" th:value="${article[field.fieldName]}" type="text" class="form-control" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" th:if="${field.dataType} == 'datetime'" />
                <!-- 图片（IMAGE） -->
				<div th:id="'uploader-'+${field.id}" class="wu-example" th:if="${field.dataType} == 'image'">
				    <!--用来存放文件信息-->
				    <div th:id="'file-priview-'+${field.id}" class="file-priview">
				    	<img th:src="${system.website} + 'resources/' + ${system.uploaddir} + ${article[field.fieldName]}" th:if="${article[field.fieldName]} != null and ${article[field.fieldName]} != ''" />
				    </div>
				    <div class="btns">
				        <div th:id="'picker-'+${field.id}">选择文件...</div>
				    </div>
				</div>
				<!-- 图集（IMAGESET） -->
				<div th:id="'uploader-'+${field.id}" th:attr="ref=${field.id}" class="wu-example" th:if="${field.dataType} == 'imageset'">
				    <!--用来存放文件信息-->
				    <div id="imagesetlist" class="uploader-list">
				    	<div th:id="${state.index}" class="file-item" th:each="file,state : ${#strings.listSplit(article[field.fieldName],',')}">
		        	        <h4 class="file-name" th:attr="filepath=${file},field-id=${field.id}" th:text="${file}"></h4>
		        	        <p class="file-state">已经上传...</p>
		        	        <i class="close fa fa-times-circle" th:onclick="removeFile('[[${state.index}]]');"></i>
		        	    </div>
				    </div>
				    <div class="btns">
				        <div th:id="'picker-'+${field.id}">选择文件...</div>
				        <button type="button" onclick="uploadFile();" id="ctlBtn" class="btn btn-default">开始上传</button>
				    </div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-lg-3">
					<label for="comment">允许评论：</label>
                    <label class="checkbox-inline">
                        <input type="radio" name="comment" id="comment-yes" value="1" th:checked="${article.comment} == 1" /> 是
                    </label>
                    <label class="checkbox-inline">
                        <input type="radio" name="comment" id="comment-no" value="0" th:checked="${article.comment} == 0" /> 否
                    </label>
                </div>
                <div class="col-lg-3">
                    <label for="subscribe">允许订阅：</label>
                    <label class="checkbox-inline">
                        <input type="radio" name="subscribe" id="subscribe-yes" value="1" th:checked="${article.subscribe} == 1" /> 是
                    </label>
                    <label class="checkbox-inline">
                        <input type="radio" name="subscribe" id="subscribe-no" value="0" th:checked="${article.subscribe} == 0" /> 否
                    </label>
                </div>
                <div class="col-lg-3">
                    <label for="status">发布状态：</label>
                    <label class="checkbox-inline">
                        <input type="radio" name="status" id="status-yes" value="1" th:checked="${article.status} == 1" /> 已发布
                    </label>
                    <label class="checkbox-inline">
                        <input type="radio" name="status" id="status-no" value="0" th:checked="${article.status} == 0" /> 未发布
                    </label>
                </div>
                <div style="clear:both;"></div>
			</div>
			<div class="form-btn-group-left" shiro:hasAnyPermissions="system:article:toedit,system:article:update">
            	<button type="submit" class="btn btn-info">保存</button>
            </div>
		</form>
	</div>
</section>
<script src="/resource/js/jquery.min.js"></script>
<script src="/resource/js/editor.md-master/editormd.min.js"></script>
<script charset="utf-8" src="/resource/js/ueditor-1.4.3.3/ueditor.config.js"></script>
<script charset="utf-8" src="/resource/js/ueditor-1.4.3.3/ueditor.all.min.js"></script>
<script src="/resource/js/plugins/tagit/jquery-ui.min.js"></script>
<script src="/resource/js/plugins/tagit/tag-it.js"></script>
<script src="/resource/js/webuploader-0.1.5/webuploader.js"></script>
<script src="/resource/js/coco-message/coco-message.js"></script>
<script src="/resource/js/my97datepicker/WdatePicker.js"></script>
<script th:inline="javascript">
	var fields = [[${fields}]];
	var article = [[${article}]];
	var thumbnailWidth = 178,thumbnailHeight = 178;
	var imagesetUploader = null;
	$(document).ready(function () {
		initUploader(
    			"picker",
    			"file-priview",
    			"filepath", 
    			{
			        title: 'Images',
			        extensions: 'gif,jpg,jpeg,bmp,png',
			        mimeTypes: 'image/*'
			    },
			    "IMAGES");
    	for(var i = 0;i < fields.length;i++){
    		var field = fields[i];
	    	if(field.dataType == 'markdown'){
	    		initMdEditor(field.id, "md-editormd-" + field.id, article[field.fieldName]);
	    	}else if(field.dataType == 'file'){
	    		initUploader(
	    				"picker-" + field.id, 
	    				"file-priview-" + field.id, 
	    				"input-" + field.id, 
	    				{},
	    				"FILES");
	    	}else if(field.dataType == 'image'){
	    		initUploader(
	    				"picker-" + field.id, 
	    				"file-priview-" + field.id, 
	    				"input-" + field.id, 
	    				{
					        title: 'Images',
					        extensions: 'gif,jpg,jpeg,bmp,png',
					        mimeTypes: 'image/*'
					    },
	    				"IMAGES");
	    	}else if(field.dataType == "imageset"){
	    		imagesetUploader = WebUploader.create({
			        // swf文件路径
			        swf: '/resource/js/webuploader-0.1.5/Uploader.swf',
			        // 文件接收服务端。
			        server: '/upload/uploadFile',
			        // 选择文件的按钮。可选。
			        compress: false,
			        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
			        pick: '#picker-' + field.id,
			        fileNumLimit: 10,
			        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
			        resize: false,
					duplicate:true,
					// 只允许选择图片文件。
				    accept: {
				        title: 'Images',
				        extensions: 'gif,jpg,jpeg,bmp,png',
				        mimeTypes: 'image/*'
				    }
	    	    });
	        	// 当有文件被添加进队列的时候
	        	imagesetUploader.on('fileQueued', function( file ) {
	        	    $("#imagesetlist").append( '<div id="' + file.id + '" class="file-item">' +
	        	        '<h4 class="file-name" filepath="" field-id="' + field.id + '">' + file.name + '</h4>' +
	        	        '<p class="file-state">等待上传...</p>' +
	        	        '<i class="close fa fa-times-circle" onclick="removeFile(\''+file.id+'\')"></i>' +
	        	    '</div>');
	        	});
	        	imagesetUploader.on('uploadSuccess', function(file, response) {
	    	        $("#" + file.id + "> .file-state").text("上传成功...");
	    	        $("#" + file.id + "> .file-name").attr("filepath", response.data.filepath).attr("field-id", field.id);
	    	        var crtVal = $("#input-" + field.id).val();
	    			if(crtVal != null && crtVal != "" && crtVal != "undefined") crtVal += ",";
	    			$("#input-" + field.id).val(crtVal + response.data.filepath);
	    	        cocoMessage.success("上传成功");
	    	    });
	        	imagesetUploader.on('uploadError', function( file ) {
	    	    	cocoMessage.error("上传失败");
	    	    });
	    	}
	    }
		
    	$("input[id^='ue-editor-value-']").each(function(e){
    		var fieldid = $(this).attr("fieldid");
    		var uevalue = $(this).val();
    		var ue = UE.getEditor("ue-editor-" + fieldid);
    		window[fieldid] = ue;
    		ue.ready(function() {
    			if(uevalue != null && uevalue != "" && uevalue != "undefined")
					ue.setContent(uevalue);
			});
    	});
    	
    	$('#myULTags').tagit({
    		availableTags: [],
            itemName: 'item',
            fieldName: 'tag'
        });
    });
    
	function initUploader(picker, el, inputEl, accepts, isShowThumb){
    	var uploader = WebUploader.create({
    		auto: true,
	        // swf文件路径
	        swf: '/resource/js/webuploader-0.1.5/Uploader.swf',
	        // 文件接收服务端。
	        server: '/upload/uploadFile',
	        // 选择文件的按钮。可选。
	        compress: false,
	        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	        pick: '#' + picker,
	        fileNumLimit: 5,
	        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	        resize: false,
			duplicate:true,
			// 只允许选择图片文件。
		    accept: accepts
	    });
    	uploader.on('fileQueued', function(file) {
    		$("#"+el).children().remove();
    		if(isShowThumb == "IMAGES"){
    			$img = $("<img />");
	    		uploader.makeThumb( file, function(error, src) {
	    	        if (error) {
	    	            $img.replaceWith('<span>不能预览</span>');
	    	            return;
	    	        }
	    	        $img.attr( 'src', src );
	    	    }, thumbnailWidth, thumbnailHeight );
    	    	$("#"+el).append($img);
    		}else{
    			$div = $("<div />");
    			$div.text(file.name);
    	    	$("#"+el).append($div);
    		}
    	});
	    uploader.on('uploadSuccess', function(file, response) {
			$("#"+el).children().remove();
	    	if(isShowThumb == "IMAGES"){
	        	$("#"+el).append($("<img src='"+response.data.url+"'/>"));
	    	}else{
    			$div = $("<div />");
    			$div.text(response.data.originalFilename);
    	    	$("#"+el).append($div);
    		}
	        $("#"+inputEl).val(response.data.filepath);
	        uploader.reset();
	        cocoMessage.success("上传成功");
	    });
	    uploader.on('uploadError', function( file ) {
			uploader.reset();
	    	cocoMessage.error("上传失败");
	    });
    }
    
	//上传文件
	function uploadFile(){
	    var fileNumbers = imagesetUploader.getFiles().length;
	    if (fileNumbers > 0) {
	    	imagesetUploader.upload();
	    } else {
			cocoMessage.error("请选择文件");
	    }
	}

	//删除文件上传队列
	function removeFile(id){
		var fileList = imagesetUploader.getFiles();
		console.log(fileList);
		for(var i = 0;i < fileList.length;i++){
			if(fileList[i].id == id){
				imagesetUploader.removeFile(id, true);
			}
		}
		var fieldId = $("#" + id + "> .file-name").attr("field-id");
		var filepath = $("#" + id + "> .file-name").attr("filepath");
		var crtValue = $("#input-" + fieldId).val();
		if(filepath && crtValue){
			var files = crtValue.split(",");
			for(var i = 0;i < files.length;i++){
				if(files[i] == filepath){
					files.splice(i, 1);
				}
			}
			$("#input-" + fieldId).val(files.toString());
		}
		$("#" + id).remove();
	}
	
    function initMdEditor(id, el, content){
    	//初始化MD编辑器
    	window[id] = editormd(el, {
            width: "100%",
            height: 350,
            path : '/resource/js/editor.md-master/lib/',
            markdown : null,
            codeFold : true,
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            searchReplace : true,
            htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
            emoji : true,
            taskList : true,
            tocm            : true,         // Using [TOCM]
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/upload/uploadMarkDown",
            onload : function() {
            	this.setMarkdown(content);
            }
        });
    }
    
    function validateForm(){
		var title = $("#title").val();
    	if(title == null || title == ""){
			cocoMessage.error("标题不能为空");
    		return false;
    	}
    	for(var i = 0;i < fields.length;i++){
    		var field = fields[i];
	    	if(field.dataType == 'markdown'){
	    		$("#input-"+ field.id).val(window[field.id].getMarkdown());
	    	}else if(field.dataType == 'html'){//初始化UE编辑器
	    		$("#input-"+ field.id).val(window[field.id].getContent());
	    	}
	    }
    	return true;
    }
</script>
</body>
</html>
